<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="global">
        <div class="header clearfix">
            <a href="javascript:;" class="city">北京</a>
            <a href="javascript:;" class="login">登录</a>
            <div class="input">
                <input type="text" placeholder="搜索：课程、机构">
            </div>
        </div>
        <div class="slide">
            <div class="app">
                <div class="slideshow"></div>
                <div class="slideshow"></div>
                <div class="slideshow"></div>
                <div class="slideshow"></div>
            </div>
            <div class="dots">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
        <div class="genre">
            <ul class="clearfix">
                <li><a href="javascript:;"><img src="./img/类型-艺术.jpg" alt="加载中...">
                        <p>艺术</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-体育.jpg" alt="加载中...">
                        <p>体育</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-语言.jpg" alt="加载中...">
                        <p>语言</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-留学.jpg" alt="加载中...">
                        <p>留学</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-小学.jpg" alt="加载中...">
                        <p>小学</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-小升初.jpg" alt="加载中...">
                        <p>小升初</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-初中.jpg" alt="加载中...">
                        <p>初中</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-中考.jpg" alt="加载中...">
                        <p>中考</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-高中.jpg" alt="加载中...">
                        <p>高中</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/类型-更多.jpg" alt="加载中...">
                        <p>更多</p>
                    </a></li>
            </ul>
        </div>
        <div class="school">
            <div class="title">
                <div class="left">
                    <img src="./img/学校.jpg" alt="">
                    更多学校
                </div>
                <a href="javascript:;" class="right">
                    推荐学校
                    <img src="./img/icon_more.jpg" alt="">
                </a>
            </div>
            <ul class="sch-list">
                <li><a href="javascript:;"><img src="./img/school-1.jpg" alt="加载中...">
                        <p>中考冲刺</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/school-2.jpg" alt="加载中...">
                        <p>新东方教育</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/school-3.jpg" alt="加载中...">
                        <p>英语四六级</p>
                    </a></li>
                <li><a href="javascript:;"><img src="./img/school-4.jpg" alt="加载中...">
                        <p>3节课</p>
                    </a></li>
            </ul>
        </div>
        <div class="limit">
            <div class="title">
                <div class="left">
                    <img src="./img/icon_time.jpg" alt="">
                    限时抢报
                </div>
                <a href="javascript:;" class="right">
                    更多优惠
                    <img src="./img/icon_more.jpg" alt="">
                </a>
            </div>
            <ul class="limit-list">
                <li>
                    <a href="javascript:;">
                        <img src="./img/钢琴-1.jpg" alt="加载中...">
                        <div class="text">
                            <span>钢琴精品课</span>
                        </div>
                    </a>
                    <div class="time">
                        <span>距开抢<p>5</p>天</span>
                        <span class="hour">24</span>:
                        <span class="minte">52</span>:
                        <span class="second">23</span>
                    </div>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./img/钢琴-2.jpg" alt="加载中...">
                        <div class="text">
                            <span>钢琴精品课</span>
                        </div>
                    </a>
                    <div class="time">
                        <span>距开抢<p>5</p>天</span>
                        <span class="hour">24</span>:
                        <span class="minte">52</span>:
                        <span class="second">23</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mp-sch">
            <div class="title">
                <div class="left">
                    <img src="./img/icon_middle.jpg" alt="">
                    中小学
                </div>
                <a href="javascript:;" class="right">
                    更多课程
                    <img src="./img/icon_more.jpg" alt="">
                </a>
            </div>
            <ul class="mp-sch-list">
                <li>
                    <a href="javascript:;">
                        <img src="./img/cls_mid1.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品钢琴课</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./img/cls_mid2.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品钢琴课</span>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="subject">
                <li><a href="javascript:;">
                        <span>高中语文</span>
                        <p class="pic pic-o">
                            <img src="./img/高中语文.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>高中语文</span>
                        <p class="pic pic-t">
                            <img src="./img/小学英语.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>高中语文</span>
                        <p class="pic pic-h">
                            <img src="./img/初中物理.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>高中语文</span>
                        <p class="pic pic-f">
                            <img src="./img/高中数学.jpg" alt="">
                        </p>
                    </a></li>
            </ul>
        </div>
        <div class="art-sport">
            <div class="title">
                <div class="left">
                    <img src="./img/icon_art.jpg" alt="">
                    艺术/体育
                </div>
                <a href="javascript:;" class="right">
                    更多课程
                    <img src="./img/icon_more.jpg" alt="">
                </a>
            </div>
            <ul class="art-sport-list">
                <li>
                    <a href="javascript:;">
                        <img src="./img/散打.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品散打课</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./img/美声.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品美声课</span>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="musical">
                <li><a href="javascript:;">
                        <span>架子鼓</span>
                        <p class="pic pic-o">
                            <img src="./img/架子鼓.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>古筝</span>
                        <p class="pic pic-t">
                            <img src="./img/古筝.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>吉他</span>
                        <p class="pic pic-h">
                            <img src="./img/吉他.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>小提琴</span>
                        <p class="pic pic-f">
                            <img src="./img/小提琴.jpg" alt="">
                        </p>
                    </a></li>
            </ul>
        </div>
        <div class="mp-sch lan-abroad">
            <div class="title">
                <div class="left">
                    <img src="./img/语言留学.jpg" alt="">
                    语言/留学
                </div>
                <a href="javascript:;" class="right">
                    更多课程
                    <img src="./img/icon_more.jpg" alt="">
                </a>
            </div>
            <ul class="mp-sch-list">
                <li>
                    <a href="javascript:;">
                        <img src="./img/日语.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品日语课</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./img/德语.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品德语课</span>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="subject">
                <li><a href="javascript:;">
                        <span>葡萄牙语</span>
                        <p class="pic pic-o">
                            <img src="./img/葡萄牙语.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>外教口语</span>
                        <p class="pic pic-t">
                            <img src="./img/外教.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>新概念英语</span>
                        <p class="pic pic-h">
                            <img src="./img/新概念.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>剑桥英语</span>
                        <p class="pic pic-f">
                            <img src="./img/剑桥.jpg" alt="">
                        </p>
                    </a></li>
            </ul>
        </div>
        <div class="mp-sch exp-trai">
            <div class="title">
                <div class="left">
                    <img src="./img/拓展训练.jpg" alt="">
                    拓展训练
                </div>
                <a href="javascript:;" class="right">
                    更多课程
                    <img src="./img/icon_more.jpg" alt="">
                </a>
            </div>
            <ul class="mp-sch-list">
                <li>
                    <a href="javascript:;">
                        <img src="./img/出游.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品出游课</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./img/玩耍.jpg" alt="加载中...">
                        <div class="text">
                            <span>精品玩耍课</span>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="subject">
                <li><a href="javascript:;">
                        <span>冬夏令营</span>
                        <p class="pic pic-o">
                            <img src="./img/夏令营.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>亲子出游</span>
                        <p class="pic pic-t">
                            <img src="./img/亲子.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>儿童乐园</span>
                        <p class="pic pic-h">
                            <img src="./img/乐园.jpg" alt="">
                        </p>
                    </a></li>
                <li><a href="javascript:;">
                        <span>拓展培训</span>
                        <p class="pic pic-f">
                            <img src="./img/培训.jpg" alt="">
                        </p>
                    </a></li>
            </ul>
        </div>
        <div class="foot">
            <ul>
                <li><a href="javascript:;" class="home"><img src="./img/首页.jpg" alt=""></a>
                    <span>首页</span></li>
                <li><a href="javascript:;" class="class"><img src="./img/分类-2.jpg" alt=""></a>
                    <span>分类</span></li>
                <li><a href="javascript:;" class="shop"><img src="./img/购物车.jpg" alt=""></a>
                    <span>购物车</span></li>
                <li><a href="javascript:;" class="my"><img src="./img/我的-2.jpg" alt=""></a>
                    <span>我的</span></li>
            </ul>
        </div>
    </div>

    <script src="./js/jQuery.js"></script>
    <script>
        $(function(){
            $('.foot li a').on('click',function(){
                $(this).hasClass('home')?
                '':$(this).hasClass('class')?
                location.href = './html/classify.html':$(this).hasClass('my')?
                location.href = './html/My.html':location.href = './html/login.html';
            })

            $('.genre li').click(function(){
                location.href = './html/class.html'
            })
        })
    </script>
</body>

</html>